<template>
  <div>
  <el-row>
    <el-col :span="8">
      <img src="../../../assets/images/logo.png">
    </el-col>
    <el-col :span="12">
      <el-form :inline="true" >
        <el-form-item >
          <el-input v-model="form.word" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchInfo">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="4">
      <el-badge :value="num" class="item">
        <el-button size="small" @click="toBuyCar">我的购物车</el-button>
      </el-badge>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8">&nbsp;</el-col>
    <el-col :span="12">
      <el-link  type="primary" style="font-size: 20px">推荐</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toPruduct(1)">男装</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toPruduct(2)">女装</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toPruduct(3)">鞋包</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toPruduct(4)">内衣</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toPruduct(5)">运动</el-link>
    </el-col>
    <el-col :span="4">&nbsp;</el-col>
  </el-row>
  </div>
</template>

<script>
    export default {
        name: "Search",
        props:{ //组件属性
           num:{ //自定义属性
             default:0,//默认值
             type:Number//数据类型
           }
        },
      data(){
          return{
                form:{ //搜索查询参数
                   page : 1,
                   row :5,
                   word:"",
                }
          }

      },
        methods:{
          loadData(){//查询我的购物车
            const self = this;
            const http = this.$http.get("/car/queryCar");
            //成功调用
            http.then(function (rs) {
              if(rs.data.code==200){
                //计算购物车数量
                self.num = rs.data.data.length;
              }else{
                self.$message("你的购物车没有数据");
              }
            })

          },
          toBuyCar(){
            this.$router.push("/buyCar");
          },
          searchInfo(){
            //this.$router.push("/productClass");
             const self = this;
             this.$http.get("/goods-info/queryFull",{params:this.form})
             .then(function (rs) {
                    if(rs.data.code == 200){
                        const json = JSON.stringify(rs.data.data);
                        sessionStorage.setItem("data",json);
                        //获取搜索结果的商品分类信息
                        const proType = rs.data.data.list[0].proType;
                        localStorage.setItem("proType",proType);
                        //存储搜索的关键字
                        localStorage.setItem("word",self.form.word);
                        //存储标识符，用于判断用户是否执行的是全文搜素
                        localStorage.setItem("status",1);
                        //跳转到商品分类
                        window.location.href ="/productClass";
                    }
             })
          },
          toPruduct(num){//跳转到商品分类
            //清空本地存储的data值
            sessionStorage.removeItem("data");
            //清空全文搜索的标识符号
            localStorage.removeItem("status");
            //第二种传值
            localStorage.setItem("proType",num);
            //this.$router.push("/productClass");
            window.location.href="/productClass";
            //第一种传值
            //this.$router.push({"name":"productClass",query:{"proType":num}});

          }
        },
       mounted() {
          this.loadData();
       }


    }
</script>

<style scoped>

</style>
